<template>
	<div>
		<div class="header">
		  <van-nav-bar :title="navName[active]" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
		</div>
		
		<van-tabs style="margin-top: 53px;" v-model="active" color="#01bf47" swipeable>
		    <van-tab title="零钱">
		      <div class="stc_money">
		        <div class="stc_con_tab">
		          <p>零钱</p>
		          <h6>{{money}}</h6>
		          <button class="stc_con_tab_button" @click="onMoney()">提现</button>
		        </div>
		      </div>
		      <div class="stc_con_tab_div">
		        <p>零钱记录</p>
		        <div class="stc_con_tab_div_box">
		          <van-pull-refresh v-model="isLoading" @refresh="changeRefresh">
		            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="changeOnLoad">
		              <div class="main-body">
		                <ul>
		                  <li v-for="(item,index) in changeList.list">
		                    <div class="stc_con_tab_div_box_left">
		                      <p>{{item.content}}</p>
		                      <p>ID：{{item.id}}</p>
		                    </div>
		                    <div  class="stc_con_tab_div_box_right">
		                      <p>-{{item.integrate}}积分</p>
		                      <p>{{item.created_at}}</p>
		                    </div>
		                  </li>
		                </ul>
		              </div>
		            </van-list>
		          </van-pull-refresh>
		        </div>
		      </div>
		    </van-tab>
		  <van-tab title="积分">
		    <div class="stc_money">
		    <div class="stc_con_tab">
		      <p>积分</p>
		      <h6>{{integration}}</h6>
		      <button class="stc_con_tab_but1" @click="onMoney()">转让</button>
		      <span class="stc_con_tab_span">|</span>
		      <button class="stc_con_tab_but2" @click="onMoney()">兑换</button>
		    </div>
		    </div>
		    <div class="stc_con_tab_div">
		      <p>积分记录</p>
		      <div class="stc_con_tab_div_box">
		        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
		          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
		        <div class="main-body">
		          <ul>
		            <li v-for="(item,index) in intList.list" v-if="item.type==2">
		              <div class="stc_con_tab_div_box_left">
		                <p>{{item.content}}</p>
		                <p>ID：{{item.id}}</p>
		              </div>
		              <div  class="stc_con_tab_div_box_right">
		                <p>+{{item.integrate}}积分</p>
		                <p>{{item.created_at}}</p>
		              </div>
		            </li>
		            <li v-for="(item,index) in intList.list" v-if="item.type==1">
		              <div class="stc_con_tab_div_box_left">
		                <p>{{item.content}}</p>
		                <p>ID：{{item.id}}</p>
		              </div>
		              <div  class="stc_con_tab_div_box_right">
		                <p class="ji_p">-{{item.integrate}}积分</p>
		                <p>{{item.created_at}}</p>
		              </div>
		            </li>
		          </ul>
		        </div>
		          </van-list>
		        </van-pull-refresh>
		      </div>
		    </div>
		
		    <!--<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">-->
		      <!--<span slot="left">选择</span>-->
		      <!--<van-cell-group>-->
		
		        <!--<van-cell-group>-->
		
		          <!--<van-cell  v-for="(item,index) in intList.list" :key="index" :title="item.content" :value="item.incomeSum" />-->
		
		        <!--</van-cell-group>-->
		
		      <!--</van-cell-group>-->
		      <!--<span slot="right">删除</span>-->
		    <!--</van-swipe-cell>-->
		  </van-tab>
		    <van-tab title="搜了贝">
		      <div class="stc_money">
		      <div class="stc_con_tab1">
		        <p class="stc_con_tab1_p">账户了贝（个）</p>
		        <h6 class="stc_con_tab1_h6">{{stc}}</h6>
		        <div class="stc_con_tab_con">
		          <div class="stc_con_tab_con_left">
		            <p class="stc_con_tab_con_left_p">锁仓贝</p>
		            <p>{{lockSTC}}</p>
		          </div>
		          <div class="stc_con_tab_con_right">
		            <p>释放贝</p>
		            <p>{{unlockSTC}}</p>
		          </div>
		        </div>
		      </div>
		      </div>
		      <div class="stc_con_tab_div">
		      <div class="main-body1">
		        <ul>
		          <li @click="toSTC('A轮')">
		            <div class="stc_con_tab_div_left">
		              <p class="stc_con_tab_div_left_p">A轮<span>0个</span></p>
		              <div class="stc_con_tab_div_div">
		                <p>锁仓 0 个</p>
		                <p>释放 0 个</p>
		              </div>
		            </div>
		            <div class="stc_con_tab_div_right">
		              <van-icon name="arrow" />
		            </div>
		          </li>
		          <li @click="toSTC('B轮')">
		            <div class="stc_con_tab_div_left">
		              <p class="stc_con_tab_div_left_p">B轮<span>0个</span></p>
		              <div class="stc_con_tab_div_div">
		                <p>锁仓 0 个</p>
		                <p>释放 0 个</p>
		              </div>
		            </div>
		            <div class="stc_con_tab_div_right">
		              <van-icon name="arrow" />
		            </div>
		          </li>
		          <li @click="toSTC('C轮')">
		            <div class="stc_con_tab_div_left">
		              <p class="stc_con_tab_div_left_p">C轮<span>0个</span></p>
		              <div class="stc_con_tab_div_div">
		                <p>锁仓 0 个</p>
		                <p>释放 0 个</p>
		              </div>
		            </div>
		            <div class="stc_con_tab_div_right">
		              <van-icon name="arrow" />
		            </div>
		          </li>
		          <li @click="toSTC('D轮')">
		            <div class="stc_con_tab_div_left">
		              <p class="stc_con_tab_div_left_p">D轮<span>0个</span></p>
		              <div class="stc_con_tab_div_div">
		                <p>锁仓 0 个</p>
		                <p>释放 0 个</p>
		              </div>
		            </div>
		            <div class="stc_con_tab_div_right">
		              <van-icon name="arrow" />
		            </div>
		          </li>
		          <li @click="toSTC('E轮')">
		            <div class="stc_con_tab_div_left">
		              <p class="stc_con_tab_div_left_p">E轮<span>0个</span></p>
		              <div class="stc_con_tab_div_div">
		                <p>锁仓 0 个</p>
		                <p>释放 0 个</p>
		              </div>
		            </div>
		            <div class="stc_con_tab_div_right">
		              <van-icon name="arrow" />
		            </div>
		          </li>
		        </ul>
		      </div>
		        <div class="zhangdan" @click="toBill()">账单</div>
		      </div>
		        <!--<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">-->
		            <!--<span slot="left">选择</span>-->
		            <!--<van-cell-group>-->
		
		                <!--<van-cell-group>-->
		
		                    <!--<van-cell  v-for="(item,index) in stcList.list" :key="index" :title="item.content" :value="item.incomeSum" />-->
		
		                <!--</van-cell-group>-->
		
		            <!--</van-cell-group>-->
		            <!--<span slot="right">删除</span>-->
		        <!--</van-swipe-cell>-->
		    </van-tab>
		</van-tabs>
	</div>
</template>

<script>
    export default {
        name: "changeDetail",
        data(){
            return {
              active: this.$route.query.active,
              money:this.$route.query.money,
              integration:this.$route.query.integration,
              stc:this.$route.query.stc,
              lockSTC:this.$route.query.lockSTC,
              unlockSTC:this.$route.query.unlockSTC,
                userInfo:[],
                changeList:[],
                changePageData:[],
                changePage:1,
                stcList:[],
                stcPage:1,
                intList:[],
                initDataList:[],
                intPage:1,
              //下拉刷新
              isLoading: false,
              //上拉加载
              loading: false,
              finished: false,
			  //选项卡名
			  navName:['零钱','积分','搜了贝'],
            }
        },
      created:function () {
        setTitle('零钱 / 积分 / SOLE')
      },
        methods:{
          onMoney(){
            this.$toast('敬请期待')
          },
            onClose(clickPosition, instance) {
                switch (clickPosition) {
                    case 'left':
                    case 'cell':
                    case 'outside':
                        instance.close();
                        break;
                    case 'right':
                        Dialog.confirm({
                            message: '确定删除吗？'
                        }).then(() => {
                            instance.close();
                        });
                        break;
                }
            },
          //获取零钱列表数据
          async changeLoad(){
                let params={
                    user_id:this.userInfo.userId,
                    pageNum:this.changePage,
                    pageSize:10
                };
                // var that=this;
                // let result=this.$axios.post(this.$api.queryMoneyInfn,params);
                // result.then(function(res){
                //     if(res.success){
                //         that.changeList=res.data;
                //         if(that.changeList.length<res.data.total){
                //             this.changePage++;
                //         }
                //     }
                // });
              const res = await this.$axios.post(this.$api.queryMoneyInfn, params);
              if (res.success) {
                if (this.loading) {
                  this.changePageData = this.changePageData.concat(res.data.list);
                  this.changeList = res.data;
                  this.changeList.list = this.changePageData;
                  if (this.changeList.list.length >= this.changeList.total) {
                    this.finished = true;
                  } else {
                    this.changePage++;
                  }
                } else {
                  this.changeList = res.data;
                  if (this.changeList.list.length >= this.changeList.total) {
                    this.finished = true;
                  }
                }
                this.isLoading = false;
                this.loading = false;
              } else {
                this.changeList = {};
                this.$toast(res.msg);
              }
            },
          //下拉刷新
          changeRefresh() {
            this.initDataList = [];
            this.changePage = 1;
            this.finished = false;
            this.changeLoad();
          },
          //上拉加载
          changeOnLoad() {
            if (this.changeList.list && this.changeList.list.length > 0) {
              this.changeLoad();
            }
          },
            // changeRefresh() {
            //
            //     this.changeList=[];
            //     this.changeLoad();
            // },
            // //上拉加载
            // changeOnLoad() {
            //     if(this.changeList.list&&this.changeList.list.length>0){
            //         this.changeLoad();
            //     };
            // },

          //获取搜了贝列表数据
            stcLoad(){
                let params={
                    user_id:this.userInfo.userId,
                    pageNum:this.stcPage,
                    pageSize:10
                };
                var that=this;
                let result=this.$axios.post(this.$api.queryIntegrateToStc,params);
                result.then(function(res){
                    if(res.success) {
                        that.stcList = res.data;
                        if (that.stcList.length < res.data.total) {
                            this.stcPage++;
                        }
                    }
                });
            },//下拉刷新
            stcRefresh() {
                this.stcList=[];
                this.changeLoad();
            },
            //上拉加载
            stcOnLoad() {
                if(this.stcList.list&&this.stcList.list.length>0){
                    this.changeLoad();
                };
            },

          //下拉刷新
          onRefresh() {
            this.initDataList = [];
            this.pageNum = 1;
            this.finished = false;
            this.getCommodity();
          },
          //上拉加载
          onLoad() {
            if (this.intList.list && this.intList.list.length > 0) {
              this.getCommodity();
            }
          },
          //获取积分列表数据
          async getCommodity() {
            let params = {
              params: {
                            user_id: this.userInfo.userId,
                            pageNum: this.intPage,
                            pageSize: 10
                        }
            };
            const res = await this.$axios.get(this.$api.integrateRecord, params);
            if (res.success) {
              if (this.loading) {
                this.initDataList = this.initDataList.concat(res.data.list);
                this.intList = res.data;
                this.intList.list = this.initDataList;
                if (this.intList.list.length >= this.intList.total) {
                  this.finished = true;
                } else {
                  this.intPage++;
                }
              } else {
                this.intList = res.data;
                if (this.intList.list.length >= this.intList.total) {
                  this.finished = true;
                }
              }
              this.isLoading = false;
              this.loading = false;
            } else {
              this.intList = {};
              this.$toast(res.msg);
            }
          },
            // intLoad(){
            //     let params={
            //         params: {
            //             user_id: this.userInfo.userId,
            //             pageNum: this.intPage,
            //             pageSize: 10
            //         }
            //     };
            //     var that=this;
            //     let result=this.$axios.get(this.$api.integrateRecord,params);
            //     result.then(function(res){
            //         console.log(res);
            //         if(res.success) {
            //             that.intList = res.data;
            //             if (that.intList.length < res.data.total) {
            //                 this.intPage++;
            //             }
            //         }
            //     });
            // },//下拉刷新
            // intRefresh() {
            //
            //     this.intList=[];
            //     this.changeLoad();
            // },
            // //上拉加载
            // intOnLoad() {
            //     if(this.intList.list&&this.intList.list.length>0){
            //         this.changeLoad();
            //     }
            // },
          toSTC(titleName){
            this.$router.push({path: '/STC', query:{titleName:titleName}})
          },
          toBill(){
            this.$router.push({path: '/Bill', query:{}})
          },
		  onClickLeft() {
		    this.$router.go(-1);
		  },
        },
        mounted(){
            this.userInfo=JSON.parse(localStorage.getItem("userInfo"));
            this.changeLoad();
            this.stcLoad();
            this.getCommodity();
        }
    }
</script>

<style scoped>
  @import '../../assets/css/index.css';
  .stc_money{
    padding-top: 0.54rem;
  }
  .main-body ul li{
    overflow: hidden;

  }
  .stc_con_tab_div_box_left{
    float: left;
    width: 50%;
  }
  .stc_con_tab_div_box_left p:nth-child(1){
    font-size: 0.14rem;
    color: #808080;
  }
  .stc_con_tab_div_box_left p:nth-child(2){
    font-size: 0.11rem;
    color: #808080;
  }
  .stc_con_tab_div_box_right{
    float: right;
    width: 50%;
    text-align: right;
  }
  .stc_con_tab_div_box_right p:nth-child(1){
    font-size: 0.14rem;
    color: #34cc75;
    padding-right: 0.05rem;
  }
  .stc_con_tab_div_box_right p:nth-child(2){
    font-size: 0.11rem;
    color: #808080;
  }
  .ji_p{
    color: #f1635b!important;
  }
  .stc_con_tab_div_left{
    float: left;
    width: 90%;
  }
  .stc_con_tab_div_left_p {
    color: #000;
    font-size: 0.14rem;
  }
  .stc_con_tab_div_left_p span{
    color: #01bf47;
    padding-left: 0.2rem;
  }
  .stc_con_tab_div_div{
    overflow: hidden;
  }
  .stc_con_tab_div_div p{
    float: left;
    width: 50%;
    color: #808080;
    font-size: 0.12rem;
  }
  .stc_con_tab_div_right{
    float: right;
  }
  .stc_con_tab_div_right i{
    font-size: 0.18rem;
    line-height: 0.55rem;
    color: #808080;
  }
  .main-body1 ul li{overflow: hidden;padding: 0.1rem 0 0.05rem;}
  .zhangdan{position: fixed;bottom: 0.2rem;width: 50%;line-height: 0.4rem;color: #fff;background-color: #01bf47;
    border-radius: 0.5rem;margin: 0 25%;text-align: center;}
    .van-tabs__nav--card{
        margin: 0;
    }
    .van-tabs__nav .van-tab--active {
      color: #01bf47;
    }
    .van-tabs .van-tabs__line {
      background-color: #01bf47;
    }
    .container .van-tabbar--fixed {
      border-top: 2px solid #ebebeb;
    }
</style>
